<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="./css/shoppingList.css">
	<title>Document</title>
</head>
<body>
	<div id="spgl">
		<div id="header">
			<h1>欢迎进入G2电商系统管理系统</h1>
		</div>

		<div id="container">
			<div id="left-nav">
				<ul>
					<li><a href="./shoppinglist.html">商品管理</a></li>
					<li>用户管理</li>
				</ul>
			</div>
			<div id="main">
				<div id="title">
					当前页面：用户管理
                    <span style="float: right; margin-right: 20px;" id="hy"></span>
				</div>	
				<form action="" id="search">
					<input type="text" placeholder="输入用户名称查询用户信息">
					<input type="submit" value="查找">
				</form>
				<ul id="tab">
					<li>用户id</li>
					<li>手机号</li>
					<li>昵称</li>
					<li>密码</li>
                    <li>生日</li>
					<li>修改</li>
				</ul>
				<div id="shop">

				</div>	
				<div id="footer">
					
				</div>
			</div>
			<div id="right">
				<form action="" method="post" id="xg">
					<ul id="change">
						<li>用户id:<span id="yh"></span></li>
						<li>手机号:<br><input type="text" id="u1" value="" name="cnumber"/></li>
						<li>昵称:<br><input type="text" id="u2" value="" name="cname"/></li>
						<li>生日:<br><input type="text" id="u3" value="" name="cbirth"/></li>
						<li>密码:<br><input type="text" id="u4" value="" name="cpassword"/></li>
					</ul>
					<input type="button" value="确认修改" onclick="change()"/>
						<li style="visibility: hidden;">id:<input type="text" id="u5" value="" /></li>
				</form>
			</div>
		</div>
	</div>
    <script>
        var gly=sessionStorage.getItem('mname');
        hy.innerHTML=(`欢迎管理员${gly}`)

            var xhr = new XMLHttpRequest()
            var url = 'http://127.0.0.1:8080/userlist/selectAll'
            xhr.open('GET',url,true)
            //修改请求主体的数据格式
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4 && xhr.status === 200){
                    //将服务器json数据转为js对象
                    // console.log(xhr.responseText);
                    var rs = JSON.parse(xhr.responseText)
                    // console.log(rs)
                    if(rs.code ===1){
                        for(let i=0;i<rs.data.length;i++){
                            var str="";
                            for(let j=0;j<rs.data.length;j++){
                                str +=`<div><div>${rs.data[j].uid}</div><div>${rs.data[j].unumber}</div><div>${rs.data[j].uname}</div><div>${rs.data[j].upassword}</div><div>${rs.data[j].ubirthday}</div><div style="cursor: pointer;" onclick="getuser(${rs.data[j].uid})">修改</div></div>`
                            }
                            shop.innerHTML=str
                        }
                    }else{
                        alert('用户信息获取失败');
                        location.reload();
                    }
                }
            }
            xhr.send()

            function getuser(theuid){
                var xhr1 = new XMLHttpRequest()
                var url = 'http://127.0.0.1:8080/userlist/getuser?uid='+theuid
                xhr1.open('GET',url)
                //修改请求主体的数据格式
                xhr1.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                xhr1.onreadystatechange = function(){
                    if(xhr1.readyState === 4 && xhr1.status === 200){
                        //将服务器json数据转为js对象
                        // console.log(xhr.responseText);
                        var rs = JSON.parse(xhr1.responseText)
                        console.log(rs)
                        if(rs.code ==1){
                            yh.innerHTML=theuid
                            u1.value=`${rs.data[0].unumber}`
                            u2.value=`${rs.data[0].uname}`
                            u3.value=`${rs.data[0].ubirthday}`
                            u4.value=`${rs.data[0].upassword}`
                            u5.value=`${rs.data[0].uid}`
                        }else{
                            alert('用户信息获取失败');
                            // location.reload();
                        }
                    }
                }
                xhr1.send()
            }


            function change(){
                if(u1.value!=''||u2.value!=''||u3.value!=''||u4.value!=''){
                    var xhr2 = new XMLHttpRequest()
                    var url = 'http://127.0.0.1:8080/userlist/changeuser'
                    xhr2.open('POST',url,true)
                    //修改请求主体的数据格式
                    xhr2.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
                    //传递给后台的数据
                    var obj = `cname=${u2.value}&cnumber=${u1.value}&cpassword=${u4.value}&cbirth=${u3.value}&cid=${u5.value}`
                    xhr2.send(obj)
                    xhr2.onreadystatechange = function(){
                        console.log(xhr2.responseText);
                        if(xhr2.readyState === 4 && xhr2.status === 200){
                            //将服务器json数据转为js对象
                            var rs = JSON.parse(xhr2.responseText)
                            console.log(rs)
                            if(rs.code ===1){
                                alert('修改成功')
                                // location.reload();
                            }else{
                                alert('修改失败');
                               // location.reload();
                           }
                        }
                    }
                }else{
                    alert('要修改的数据不能为空')
                    location.reload();
                }
            }
    </script>
</body>
</html>
